<template>
  <page-header-wrapper>
    <a-card v-loading="loading">
      <div style="text-align: center; width: 80%; margin: 0 auto">
        <a-progress
          :stroke-color="{
            '0%': '#108ee9',
            '100%': '#87d068',
          }"
          :percent="progress"
          v-if="data.next_version"
        />
      </div>
      <template v-if="data.current_version">
        <div class="versionBox" v-if="data.next_version">
          <a-alert message="更新过程请勿关闭或刷新页面" type="info" show-icon />
          <div class="version">
            <h4>当前系统版本：v{{ data.current_version }}</h4>
            <div class="item">
              <span>下一版本：</span>
              <span>v{{ data.next_version.version }}</span>
            </div>
            <div class="item">
              <span>发布时间：</span>
              <span>{{ data.next_version.update_datetime }}</span>
            </div>
            <div class="item">
              <span>更新内容：</span>
              <span v-html="data.next_version.desc"></span>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="alert no_update_tip">
            当前版本: {{ data.current_version }}, 已经是最新版
          </div>
        </div>
        <div style="text-align: center" v-if="data.next_version">
          <a-button type="primary" @click="update()">立即更新</a-button>
        </div>
        <a-divider />
        <div class="alert" role="alert">
          <div><b style="font-size: 20px">更新记录</b></div>
          <template v-if="data.version_list && data.version_list.length > 0">
            <div v-for="(item, index) in data.version_list" :key="index">
              <a-divider orientation="left">
                版本：v{{ item.version }} <a-divider type="vertical" />更新时间：{{ item.time }}
              </a-divider>
              <div>
                <div v-html="item.desc"></div>
              </div>
            </div>
          </template>
          <template v-else>
            <a-empty description="暂无更新记录" />
          </template>
        </div>
      </template>
      <a-result status="warning" title="您当前的系统不支持在线更新！" v-if="!data.current_version"> </a-result>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { updateSystem, getList } from '@/api/setting/update'

export default {
  name: 'UpdateSystem',
  components: {},
  data() {
    return {
      data: [],
      progress: 0,
      loading: false,
    }
  },
  async created() {
    await this.getData()
  },
  methods: {
    getData: async function () {
      this.loading = true
      this.progress = 0
      await getList({})
        .then((res) => {
          if (res.code == 0) {
            this.data = res.data
          } else {
            this.data.current_version = false
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    update: async function () {
      var params = {}
      const time = setInterval(() => {
        if (this.progress == 90) {
          return false
        } else {
          this.progress++
        }
      }, 100)
      await updateSystem(params).then((res) => {
        clearInterval(time)
        if (res.code != 0) {
          this.$message.error(res.msg)
        } else {
          this.progress = 100
          this.$message.success(res.msg)
          setTimeout(() => {
            this.getData()
          }, 2000)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-divider-horizontal {
  margin: 40px 0 !important;
}
/deep/.ant-divider-inner-text {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
.alert {
  border-radius: 0.15rem;
}

.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.alert-secondary {
  color: #464a4e;
  background-color: #e7e8ea;
  border-color: #dddfe2;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}
.no_update_tip {
  text-align: center;
  color: red;
  font-size: 20px;
}
.title_1 {
  font-size: 15px;
}
.versionBox {
  width: 40%;
  margin: 40px auto;
  .version {
    width: 100%;
    background-color: #f8f8f8;
    margin-top: 20px;
    padding: 20px 30px;
  }
  .item {
    display: flex;
    align-items: center;
    margin-top: 10px;
    span:nth-child(2) {
      color: #1890ff;
    }
  }
}
</style>
